<template>
	<van-nav-bar title="添加好友" left-text="返回" left-arrow @click-left="back()" />
	<div class="container-addfirends">
		<div v-if="!search" class="user-container">
			<!-- 查询好友 -->
			<!-- 好友 -->
			<van-field class="search-firend-field" v-model="firendName" label="用户名" placeholder="请输入用户名" />

			<van-button class="search-btn" block type="primary" @click="queryUser()">查找好友</van-button>
		</div>

		<div v-else class="user-container">
			<!-- 查询结果 -->
			<!-- 好友列表 -->
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onQueryUser">
				<div class="search-item" v-for="(item, i) in searchList" :key="i">
					<van-image class="search-item-header" width="36px" height="36px" :src="item.header" />
					<div class="search-item-account">{{item.account}} ({{item.nick}})</div>

					<!-- 判断是否可以添加 item.state 0:本人, 1:好友 2:申请中 3:等待处理中 4:可申请-->
					<van-button v-if="item.state === 0" class="search-item-btn" round type="default"
						@click="showAccountInfo(item)">查看本人信息</van-button>
					<van-button v-else-if="item.state === 1" class="search-item-btn" round plain type="success"
						@click="toSendMsg(item)">前往聊天</van-button>
					<van-button v-else-if="item.state === 2" class="search-item-btn" round type="primary"
						@click="showApplyInfo(item)" color="#D2691E">正在申请中</van-button>
					<van-button v-else-if="item.state === 3" class="search-item-btn" round type="primary"
						@click="optionApply(item)" color="#FFA500">前往处理</van-button>
					<van-button v-else-if="item.state === 4" class="search-item-btn" round type="primary"
						@click="applyFirends(item)">申请添加</van-button>
				</div>
			</van-list>

			<!-- <div > -->
			<!-- 头像 -->
			<!-- <van-image round width="52px" height="52px" -->
			<!-- src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" /> -->
			<!-- account 账号 -->
			<!-- <van-cell :key="i" :title="item.account" /> -->
			<!-- 是否是好友 -->
			<!-- </div> -->
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant'
	export default {
		data() {
			return {
				"firendName": "",
				"finished": false,
				"loading": false,
				"search": false,
				"searchList": []
			}
		},
		methods: {
			onQueryUser() {
				this.loading = true
				this.finished = true
			},
			queryUser() {
				if (this.firendName === "") {
					showToast("请输入用户名")
					return
				}
				// 判断登录

				let that = this
				// 获取 用户名称
				console.log(this.firendName);
				// 请求接口
				this.$http.queryUser({
					"account": this.$store.getters.userInfo.account,
					"accountKey": this.firendName
				}).then(function(resp) {
					// 返回好友列表
					console.log(resp.data)
					// 查找结果 -> 可空
					that.searchList = resp.data.data
					that.search = true
				}).catch(function(e) {
					console.log(e);
				}).then(function() {
					console.log("隐藏loading");
				})
			},
			applyFirends(user) {
				// 申请添加 用户 user
				// 判断用户登录是否失效

				let that = this
				// 请求接口
				this.$http.addFirend({
					"from": this.$store.getters.userInfo.account,
					"to": user.account,
					"commitTime": this.$strHelper.formatDate("yyyy-MM-dd HH:mm:ss")
				}).then(function(resp) {
					// 返回申请成功 -> 对话框提示算逑
					console.log(resp.data);

					if (resp.data.code != 200) {
						showToast(resp.data.msg)
					}
				}).catch(function(e) {
					console.log(e);
				}).then(function() {
					console.log("隐藏loading");
				})
			},
			showAccountInfo(user) {
				//  显示本人 信息
				showToast("显示 " + user.account + " 的用户信息")
			},
			showApplyInfo(user){
				// 查看申请信息
				showToast("查看对 " + user.account + " 的申请信息")
			},
			optionApply(user){
				// 处理其他用户的 添加申请
				showToast("处理用户 " + user.account + " 的添加申请")
			},
			toSendMsg(user) {
				// 前往和用户聊天
				showToast("打开和用户 " + user.account + " 的聊天界面")
			},
			back() {
				console.log(this.$strHelper.formatDate("yyyy-MM-dd HH:mm:ss"));
				if (this.search) {
					// 有进行查找, 第一次点击先恢复页面
					this.search = false
					this.searchList = []
				} else {
					this.$router.back()
				}
			}
		}
	}
</script>

<style lang="scss">
	.container-addfirends {
		height: 100%;
		background-color: #f0f0f0;

		& .search-firend-field {
			margin: 24px auto;
			width: 90%;
		}

		& .search-btn {
			width: 90%;
			margin: 0 auto;
		}

		& .user-container {
			padding-top: 20px;

			& .search-item {
				padding: 0 16px 0 16px;
				height: 56px;
				display: flex;
				align-items: center;
				flex-direction: row;
				border-bottom: 1px solid #ececec;
				background-color: #FFFFFF;

				& .search-item-header {}

				& .search-item-account {
					margin-left: 12px;
					flex: 1;
				}

				& .search-item-btn {
					height: 65%;
				}
			}
		}
	}
</style>